<!--
 * @Author: 137 '1432417996@qq.com'
 * @Date: 2025-05-14 21:51:23
 * @LastEditors: 137 '1432417996@qq.com'
 * @LastEditTime: 2025-05-15 21:31:03
 * @FilePath: \starter-3\components\homepage\realRate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="rate-content">
    <div class="rate-box rate-title">
      <div class="rate-text">实时汇率 (更新时间:{{ rateTime }}) </div>
    </div>
    <div v-for="(item, index) in exchangeRateList" :key="index" class="rate-box">
      <div class="rate-text">{{ item.formattedDisplay }}</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { getHomeExchangeRate } from '@/api/homePage';

const rateTime = ref(null);

// 汇率列表
const exchangeRateList = ref([
  { name: '美元', rate: '7.2672' },
  { name: '欧元', rate: '7.8760' },
  { name: '英镑', rate: '9.4121' },
  { name: '日元', rate: '0.0485' },
  { name: '加元', rate: '5.0820' },
]);

onMounted(() => {
  //getHomeExchangeRateFun();
})

// 汇率
const getHomeExchangeRateFun = async () => {
  getHomeExchangeRate().then(res => {
    rateTime.value = dayjs.tz(res.data.updateTime, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
    rateTime.value = dayjs.tz(res.data.updateTime, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
    exchangeRateList.value = res.data.rates;
  })
  // rateTime.value = dayjs.tz(res.data.updateTime, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
  // exchangeRateList.value = res.data.rates;
}

const getHomeExchangeRateFunSSR = async () =>{
  const res = await getApi('/home/exchange-rate/list');
  console.log('------------------ ')
  console.log(res)
  rateTime.value = dayjs.tz(res.data.time, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
  exchangeRateList.value = res.data.rates;
}

getHomeExchangeRateFunSSR();
</script>
